<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地文件上传仓库助手</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-2xl mx-auto">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-cloud-upload-alt mr-2"></i>
                    本地文件上传仓库助手
                </h1>
                <p class="text-gray-600">简单、快速的文件上传解决方案</p>
            </div>

            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title">上传文件</h2>
                    
                    <!-- 文件拖拽区域 -->
                    <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors">
                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i>
                        <p class="text-gray-600 mb-2">拖拽文件到此处或点击选择文件</p>
                        <input type="file" id="fileInput" class="hidden" multiple>
                        <button onclick="document.getElementById('fileInput').click()" 
                                class="btn btn-primary btn-sm">
                            <i class="fas fa-folder-open mr-2"></i>选择文件
                        </button>
                    </div>

                    <!-- 文件列表 -->
                    <div id="fileList" class="mt-4 hidden">
                        <h3 class="font-semibold mb-2">已选择的文件：</h3>
                        <div id="selectedFiles" class="space-y-2"></div>
                    </div>

                    <!-- 上传按钮 -->
                    <div class="mt-6 text-center">
                        <button id="uploadBtn" class="btn btn-success" disabled>
                            <i class="fas fa-upload mr-2"></i>开始上传
                        </button>
                    </div>

                    <!-- 进度条 -->
                    <div id="progressContainer" class="mt-4 hidden">
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                            <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
                        </div>
                        <p id="progressText" class="text-sm text-gray-600 mt-2 text-center">准备上传...</p>
                    </div>

                    <!-- 结果提示 -->
                    <div id="resultMessage" class="mt-4 hidden"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let selectedFiles = [];

        // 文件选择处理
        document.getElementById('fileInput').addEventListener('change', handleFileSelect);
        
        // 拖拽功能
        const dropZone = document.getElementById('dropZone');
        
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('border-blue-400', 'bg-blue-50');
        });
        
        dropZone.addEventListener('dragleave', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-blue-400', 'bg-blue-50');
        });
        
        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-blue-400', 'bg-blue-50');
            
            const files = Array.from(e.dataTransfer.files);
            handleFiles(files);
        });

        function handleFileSelect(e) {
            const files = Array.from(e.target.files);
            handleFiles(files);
        }

        function handleFiles(files) {
            selectedFiles = files;
            displayFiles();
        }

        function displayFiles() {
            const fileList = document.getElementById('fileList');
            const selectedFilesDiv = document.getElementById('selectedFiles');
            const uploadBtn = document.getElementById('uploadBtn');
            
            if (selectedFiles.length > 0) {
                fileList.classList.remove('hidden');
                uploadBtn.disabled = false;
                
                selectedFilesDiv.innerHTML = '';
                selectedFiles.forEach((file, index) => {
                    const fileDiv = document.createElement('div');
                    fileDiv.className = 'flex items-center justify-between p-3 bg-gray-50 rounded-lg';
                    fileDiv.innerHTML = `
                        <div>
                            <i class="fas fa-file mr-2 text-blue-500"></i>
                            <span class="font-medium">${file.name}</span>
                            <span class="text-sm text-gray-500 ml-2">(${formatFileSize(file.size)})</span>
                        </div>
                        <button onclick="removeFile(${index})" class="btn btn-ghost btn-xs btn-circle">
                            <i class="fas fa-times"></i>
                        </button>
                    `;
                    selectedFilesDiv.appendChild(fileDiv);
                });
            } else {
                fileList.classList.add('hidden');
                uploadBtn.disabled = true;
            }
        }

        function removeFile(index) {
            selectedFiles.splice(index, 1);
            displayFiles();
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 上传功能
        document.getElementById('uploadBtn').addEventListener('click', uploadFiles);

        async function uploadFiles() {
            if (selectedFiles.length === 0) return;

            const progressContainer = document.getElementById('progressContainer');
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            const resultMessage = document.getElementById('resultMessage');
            const uploadBtn = document.getElementById('uploadBtn');

            progressContainer.classList.remove('hidden');
            uploadBtn.disabled = true;
            resultMessage.classList.add('hidden');

            const formData = new FormData();
            selectedFiles.forEach(file => {
                formData.append('files', file);
            });

            try {
                const xhr = new XMLHttpRequest();
                
                xhr.upload.addEventListener('progress', (e) => {
                    if (